<!-- src/views/AccountCenter/Address.vue -->
<template>
  <div class="address-container">
    <!-- 标题和操作按钮 -->
    <div class="address-header">
      <h2 class="page-title">地址管理</h2>
      <button class="create-button" @click="showCreateForm = true">
        <span>+ 创建新地址</span>
      </button>
    </div>

    <!-- 地址创建表单 -->
    <el-dialog v-model="showCreateForm" title="创建新地址" width="50%">
      <el-form :model="currentAddress" label-width="100px">
        <el-form-item label="* 收件人:">
          <el-input v-model="currentAddress.receiver" placeholder="请输入收件人姓名"></el-input>
        </el-form-item>
        <el-form-item label="* 手机:">
          <el-input v-model="currentAddress.phone" placeholder="请输入手机号"></el-input>
          <el-select v-model="currentAddress.countryCode" placeholder="请选择国家/地区">
            <el-option label="中国大陆 +86" value="+86"></el-option>
            <!-- 可以添加更多国家/地区选项 -->
          </el-select>
        </el-form-item>
        <el-form-item label="* 配送地址:">
          <el-cascader v-model="currentAddress.region" :options="regionOptions" placeholder="--请选择--"
            :props="{ checkStrictly: true }"></el-cascader>
          <el-input v-model="currentAddress.dormitory" placeholder="请输入寝室号"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelForm">取消</el-button>
          <el-button type="primary" @click="submitForm">保存地址</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 地址列表 -->
    <div class="address-list" v-if="addresses.length > 0">
      <div class="address-item" v-for="(address, index) in addresses" :key="address.id">
        <div class="address-info">
          <span class="user-name">{{ address.receiver }}</span>
          <span class="phone">{{ address.phone }}</span>
          <p class="detail">
            {{ address.region.join(' ') }} {{ address.dormitory }}
          </p>
        </div>
        <div class="address-actions">
          <el-button v-if="!address.isDefault" link type="primary" @click="setAsDefault(index)">设为首选</el-button>
          <el-button link type="primary" @click="editAddress(index)">修改</el-button>
          <el-button link type="danger" @click="deleteAddress(index)">删除</el-button>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div class="empty-container" v-else>
      <div class="empty-content">
        <svg class="empty-icon" viewBox="0 0 48 48" fill="none">
          <path d="M42 16v26H6V16l18-12 18 12zM24 22v12M18 22h12" stroke="#999" stroke-width="2"
            stroke-linecap="round" />
        </svg>
        <p class="empty-text">暂无记录</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 地址数据（初始化为空）
const addresses = ref([

]);

// 显示创建/编辑表单
const showCreateForm = ref(false);

// 当前地址数据（用于创建或编辑）
const currentAddress = reactive({
  id: null,
  receiver: '',
  phone: '',
  countryCode: '+86',
  region: [],
  dormitory: '',
  isDefault: false
});

// 地区选项（东区和西区）
const regionOptions = [
  {
    value: '东区',
    label: '东区',
    children: Array.from({ length: 20 }, (_, i) => ({
      value: `东${i + 1}`,
      label: `东${i + 1}`,
      children: [] // 子级寝室号由用户自行填写
    }))
  },
  {
    value: '西区',
    label: '西区',
    children: Array.from({ length: 10 }, (_, i) => ({
      value: `西${i + 1}`,
      label: `西${i + 1}`,
      children: [] // 子级寝室号由用户自行填写
    }))
  }
];

// 保存或更新地址
const submitForm = () => {
  if (currentAddress.receiver && currentAddress.phone && currentAddress.region.length) {
    if (currentAddress.id === null) {
      // 新增地址
      currentAddress.id = Date.now();
      addresses.value.push({ ...currentAddress }); // 添加到末尾
    } else {
      // 更新地址
      const index = addresses.value.findIndex(addr => addr.id === currentAddress.id);
      if (index !== -1) {
        addresses.value[index] = { ...currentAddress };
      }
    }
    resetForm();
    showCreateForm.value = false;
  } else {
    alert('请填写完整地址信息');
  }
};

// 取消表单
const cancelForm = () => {
  resetForm();
  showCreateForm.value = false;
};

// 重置表单
const resetForm = () => {
  Object.assign(currentAddress, {
    id: null,
    receiver: '',
    phone: '',
    countryCode: '+86',
    region: [],
    dormitory: '',
    isDefault: false
  });
};

// 设为首选地址
const setAsDefault = (index) => {
  // 找到当前默认地址（如果有），并将其 isDefault 属性设置为 false
  const currentDefaultIndex = addresses.value.findIndex(addr => addr.isDefault);
  if (currentDefaultIndex !== -1) {
    addresses.value[currentDefaultIndex].isDefault = false;
  }

  // 将选中的地址设置为默认地址（isDefault 设置为 true），并移动到地址列表的第一个位置
  const defaultAddress = addresses.value.splice(index, 1)[0];
  defaultAddress.isDefault = true;
  addresses.value.unshift(defaultAddress);
};

// 编辑地址
const editAddress = (index) => {
  Object.assign(currentAddress, { ...addresses.value[index] });
  showCreateForm.value = true;
};

// 删除地址
const deleteAddress = (index) => {
  addresses.value.splice(index, 1);
};
</script>

<style scoped>
.address-container {
  max-width: 800px;
  margin: 0 auto;
}

.address-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.page-title {
  font-size: 18px;
  color: #333;
  margin: 0;
}

.create-button {
  background: #e05649;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.3s;
}

.empty-container {
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-content {
  text-align: center;
}

.empty-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}

.empty-text {
  color: #999;
  font-size: 14px;
  margin: 0;
}
</style>